<template>


<el-form
  :model="user"
  status-icon
  :rules="rules"
  ref="user"
  label-width="100px"
  class="aa"
>

<el-form-item label="账号" prop="userName">
    <el-input v-model="user.userName"></el-input>
  </el-form-item>
<el-form-item label="身份证号码" prop="userIdcard">
    <el-input v-model="user.userIdcard"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="userIdcard">
    <el-input
      type="userPassword"
      v-model="user.userPassword"
      autocomplete="off"
    ></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input
      type="userPassword"
      v-model="user.checkPass"
      autocomplete="off"
    ></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm('user')">提交</el-button>
    <el-button @click="resetForm('user')">重置</el-button>
  </el-form-item>
</el-form>

</template>

<script>
  export default {
    data() {
    // 身份证号码验证
    let idCardValidity = (rule, code, callback) => {
      var city = {11: "北京",12: "天津",13: "河北",14: "山西",15: "内蒙古",21: "辽宁",22: "吉林",23: "黑龙江 ",31: "上海",32: "江苏",33: "浙江",34: "安徽",
                  35: "福建",36: "江西",37: "山东",41: "河南",42: "湖北 ",43: "湖南",44: "广东",45: "广西",46: "海南",50: "重庆",51: "四川",
                  52: "贵州",53: "云南",54: "西藏 ",61: "陕西",62: "甘肃",63: "青海",64: "宁夏", 65: "新疆",71: "台湾",81: "香港",82: "澳门",91: "国外 ",
      };
      var tip = "";
      var pass = true;

      if (
        !code ||
        !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(
          code
        )
      ) {
        tip = "身份证号格式错误";
        pass = false;
      } else if (!city[code.substr(0, 2)]) {
        tip = "地址编码错误";
        pass = false;
      } else {
        // 18位身份证需要验证最后一位校验位
        if (code.length === 18) {
          code = code.split("");
          // ∑(ai×Wi)(mod 11)
          // 加权因子
          var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
          // 校验位
          var parity = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];
          var sum = 0;
          var ai = 0;
          var wi = 0;
          for (var i = 0; i < 17; i++) {
            ai = code[i];
            wi = factor[i];
            sum += ai * wi;
          }
          var last = parity[sum % 11];
          if (parity[sum % 11] != code[17]) {
            tip = "校验位错误";
            pass = false;
          }
        }
      }
      if (!pass) {
        callback(new Error(tip));
      } else {
        callback();
      }
      // if (!pass) alert(tip)
      // return pass
    };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.user.checkPass !== '') {
            this.$refs.user.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.user.userPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        user: {
          userPassword: '',
          checkPass: '',
          age: '',
        },
        rules: {
          userName :'',
          userPassword: [{ validator: validatePass, trigger: 'blur' }],
          checkPass: [{ validator: validatePass2, trigger: 'blur' }],
          userIdcard: [{ validator: idCardValidity, trigger: 'blur' }],
        },
      }
    },
    methods: {
      submitForm(user) {
        this.$refs[user].validate((valid) => {
          if(valid){
                    this.$axios.put("user/forgetPwd",this.user).then(request=>{
                        
                        if(request.data.statusCode==200){
                        this.$message.success(request.data.statusMessage);
                            //跳转到另一个组件
                            this.$router.push('/home')
                        }else{
                            this.$message.error(request.data.statusMessage)
                        }
                    })
                }else{
                    console.log("验证失败")
                }
            })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
  }
</script>

<style>
.aa{
  width: 30%;
  -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    /* height: 40px; */
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    margin-left: 30%;
    margin-top: 5%;
    
}
</style>
